<script>
export default {
  name: "airsShow",
  data(){
    return{
      form:{
        saddr:'',
        eaddr: '',
      },
      airslist:{
        airId: '',
        airSaddr: '',
        airEaddr: '',
        airSpace:'',
        airPrice:'',
        airStatus:'',
        airStime: '',
        airEtime: '',
        airNumber: '',
        ariType: '',
        ariName:''
      },
      air:{
        airId: '',
        airSaddr: '',
        airEaddr: '',
        airSpace:'',
        airPrice:'',
        airStatus:'',
        airStime: '',
        airEtime: '',
        airNumber: '',
        ariType: '',
        ariName:''
      },
    }
  },
  methods:{
    findbyaddr(saddr){
      this.$axios.get('/air/findbyaddr',{
        params:{
          saddr:saddr,
        }
      }).then(res=>{
        this.airslist=res.data.data;
      })
    },
    findById(airId){
      this.$axios.get('/air/findOne',{
        params:{
          airId:airId,
        }
      }).then(res=>{
        this.air=res.data.data;
      })
    },
    reserve(airId){
        this.$router.push({path:'/airsOrder',query:{airId:airId}})

    },
    onSubmit(airSaddr) {
      this.findbyaddr(airSaddr);
      // this.$axios.get('/air/findbyaddr',{
      //   params:{
      //     airSaddr:airSaddr
      //   }
      // }).then(res=>{
      //   this.airslist=res.data.data;
      // })
    }
  },
  mounted() {
    var saddr=this.$route.query.saddr;
    console.log(saddr)
    if (saddr!=null){
      this.findbyaddr(saddr);
    }

  }
}
</script>

<template>
<div class="map-container">
    <div id="b" style="margin-left:160px">
        <el-col :offset="5" :span="18">
            <el-row>
                <el-col :offset="12" :span="12">
                    <a class="header_a">适老化及无障碍</a>
                    <a class="header_a">请登录</a>
                    <span class="header_a">或</span>
                    <a class="header_a">免费注册</a>
                    <a class="header_a">消息</a>
                    <a class="header_a">查看订单</a>
                    <a class="header_a">积分商城</a>
                    <a class="header_a">联系客服</a>
                </el-col>
            </el-row>
        </el-col>
        <el-col>
            <el-row>
                <el-col :span="19">
                    <img class="header_img" style="width: 136px;height: 54px" src="https://s.qunarzz.com/f_cms/2021/1638865973476_447461838.png"/>
                    <a class="header_a2">首页</a>
                    <a class="header_a2">机票</a>
                    <a class="header_a2">酒店</a>
                    <a class="header_a2">团购</a>
                    <a class="header_a2">度假</a>
                    <a class="header_a2">邮轮</a>
                    <a class="header_a2">门票</a>
                    <a class="header_a2">火车票</a>
                    <a class="header_a2">攻略</a>
                    <a class="header_a2">当地人</a>
                    <a class="header_a2">汽车票</a>
                </el-col>
            </el-row>
        </el-col>
    </div>
  <div style="margin-left: 160px">
    <el-form  label-width="80px">
      <el-form-item>
        <el-radio-group >
          <el-radio label="单程"></el-radio>
          <el-radio label="往返"></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
  <div style="margin-left: 160px">
    <el-form  ref="air" :model="air" label-width="80px">
      <el-col :span="4" >
      <el-input v-model="air.airSaddr" label="西安" placeholder='请输入要出发的城市名称'></el-input>
      </el-col>
      <el-col  class="line" :span="1" label-width="20px"><i class="el-icon-remove"></i></el-col>
      <el-col :span="4" >
        <el-input v-model="air.airEaddr"  placeholder='请输入要到达的城市名称'></el-input>
      </el-col>
      <el-col :span="4">
        <el-date-picker type="date" placeholder="出发日期" v-model="air.airStime" style="width: 100%;"></el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-date-picker type="date" placeholder="返回日期" v-model="air.airEtime"   style="width: 100%;"></el-date-picker>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="onSubmit(air.airSaddr)">搜索</el-button>
      </el-col>
    </el-form>
  </div>

  <div style="margin-left: 160px ;padding-top: 50px;width: 920px">
        <el-collapse >
        <el-collapse-item>
          <template slot="title">
            网站公告
          </template>
          <div>【登录APP活动】 登录APP购票可尊享更多优惠活动，享惊喜价格。</div>
          <div>【登录优惠活动】 登录购票可享受更多优惠活动，享受惊喜价格</div>
          <div>【小程序和网页版功能说明】 受产品规则限制，不同端展示机票产品不同。</div>
          <div>【成都机场温馨提示】
            根据成都双流国际机场微信公众号消息：

            自2023年3月26日00:00起，原在双流机场运行的国际客运航班将全部转场至天府机场运行，港澳台地区客运航班将临时转场至天府机场运行，中国南方航空将部分转场至天府机场运行。原在天府机场运行的长龙航空、深圳航空将部分转场至双流机场运行。转场后，同时在双流机场和天府机场运营的7家航空公司为：中国国际航空、四川航空、中国东方航空、中国南方航空、成都航空、长龙航空、深圳航空；仅在天府机场运营的26家航空公司为：祥鹏航空、厦门航空、春秋航空、吉祥航空、山东航空、上海航空、青岛航空、海南航空、首都航空、中国联合航空、华夏航空、昆明航空、瑞丽航空、奥凯航空、多彩贵州航空、河北航空、天津航空、东海航空、乌鲁木齐航空、北部湾航空、湖南航空、江西航空、九元航空、西部航空、桂林航空、重庆航空；仅在双流机场运营的航空公司为：西藏航空。

            更多详细信息，请务必登录成都双流国际机场微信公号众查看，按照官方通知为准。

            (来源：03月20日 成都双流国际机场微信公众号 )
          </div>
        </el-collapse-item>
        </el-collapse>
  </div >


  <div style="margin-left: 160px ;padding-top: 50px; ">

     <el-form ref="airslist" :model="airslist" v-for="airs in airslist" :key="airs.airId" align="center"  >
         <div style="width: 912px;height: 60px;border:1px solid  #0e83bf; line-height:100%">
         <el-row>
           <el-col :span="4" offset="1"  >
             <el-row >
               <el-col >{{ airs.ariName }}</el-col>
             </el-row>
             <el-row>
               <el-col>{{airs.airNumber}}->{{airs.airSpace }}</el-col>
             </el-row>
           </el-col>
           <el-col :span="2" offset="3"  > {{airs.airSaddr}}</el-col>
           <el-col :span="2"><span class="el-icon-right"></span></el-col>
           <el-col :span="2"  > {{airs.airEaddr}}</el-col>
           <el-col :span="2" offset="3" > ￥{{airs.airPrice}}</el-col>
           <el-col :span="4"  >
             <el-form-item>
               <el-button type="warning" @click="reserve(airs.airId)">预定</el-button>

             </el-form-item>
           </el-col>
         </el-row>
         </div>
     </el-form>


  </div>
</div>


</template>

<style scoped>
.map-container{
  background-image: url('../assets/2.jpg');
  background-size: cover;
  background-position: center center;
//opacity: 0.9;
  width: 100%;
  height: 700px;

}
#b{
    width: 1200px;
    height:90px;
;
}
.header_a{
    font-size: 12px;
    margin-top: 0px;
    margin-left: 5px;
}
.header_img{
    float: left;
    margin-bottom: 0px;
}
.header_a2{
    font-size: 15px;
    font-family: "Hiragino Sans GB";
    float: left;
    margin-right: 12px;
    margin-top: 30px;
}

</style>
